<template>
  <div class="common-details">
    <customDetailsTopbar title="重点设备详情" flag @back="back" />
    <div class="d-scroll listInner px-1">
      <div class="py-1 px-1 bg-white">
        <customTitle :is-line="true" bg-color="#3795ff" title="设备信息" />
        <div class="baseLoad">
          <div v-for="(it, ind) in descList1" :key="ind">
            <custom-details-item :icon="it.icon" :label="it.label" :value="it.value + ''" />
          </div>
        </div>
        <custom-title v-if="deviceType !== '工业窑炉设备' && deviceType !== '其他' && deviceType !== '/'" :is-line="true" bg-color="#3795ff" title="设备参数" />
        <div class="baseLoad1">
          <template v-if="deviceType === '锅炉设备'">
            <custom-details-item label="额定蒸发量（t/h）" :value="allData.deviceOther" />
            <custom-details-item label="额定热功率（MW）" :value="allData.deviceRatedPower" />
            <custom-details-item label="额定压力（MPa）" :value="allData.deviceRatedStress" />
            <custom-details-item label="额定温度（℃）" :value="allData.deviceSpecialRated" />
            <custom-details-item label="燃料种类" :value="allData.deviceRemark" />
            <custom-details-item label="热效率" :value="allData.deviceHeatEfficiency" />
          </template>
          <template v-if="deviceType === '空压机设备'">
            <custom-details-item label="额定功率（kW）" :value="allData.deviceRatedPower" />
            <custom-details-item label="额定排气量（m3/min）" :value="allData.deviceOther" />
            <custom-details-item label="额定压力（MPa）" :value="allData.deviceRatedStress" />
          </template>
          <template v-if="deviceType === '制冷、空调设备'">
            <custom-details-item label="制冷功率（kW）" :value="allData.deviceRatedPower" />
            <custom-details-item label="制冷剂类型" :value="allData.deviceRemark" />
            <custom-details-item label="耗电量（kWh）" :value="allData.deviceOther" />
            <custom-details-item label="制冷效率（kW）" :value="allData.deviceHeatEfficiency" />
          </template>
          <template v-if="deviceType === '其他高耗能设备'">
            <custom-details-item label="额定功率（kW）" :value="allData.deviceRatedPower" />
            <custom-details-item label="额定电流（A）" :value="allData.deviceSpecialRated" />
            <custom-details-item label="额定电压（V）" :value="allData.deviceRatedStress" />
            <custom-details-item label="额定频率（HZ）" :value="allData.deviceOther" />
            <custom-details-item label="能效等级" :value="allData.deviceRemark" />
            <custom-details-item label="热效率" :value="allData.deviceHeatEfficiency" />
          </template>
          <template v-if="deviceType === '光伏发电机组'">
            <custom-details-item label="太阳能电池板的额定功率（kW）" :value="allData.deviceRatedPower" />
            <custom-details-item label="逆变器的额定功率（kW）" :value="allData.deviceOther" />
            <custom-details-item label="电池组的额定容量（MW）" :value="allData.deviceSpecialRated" />
            <custom-details-item label="电压（V）" :value="allData.deviceRatedStress" />
            <custom-details-item label="效率" :value="allData.deviceHeatEfficiency" />
          </template>
        </div>
        <div class="common_list" style="padding: 0;">
          <div v-for="(list,index) in listMap" :key="index" class="list_item">
            <customTitle :is-line="true" bg-color="#3795ff" :title="list.label" />
            <template v-if="list.table && list.table.length>0">
              <div v-for="item,ind in list.table" :key="ind">
                <div class="content_area">
                  <div class="number_order">{{ index + 1 }}</div>
                  <div class="right_content">
                    <div class="content_title" style="max-width: 100%">
                      {{ item.examineType }}
                    </div>
                    <ul class="des-list">
                      <li v-for="des in list.value" :key="des.value" class="des">
                        <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="des.icon" />
                        <div class="label">{{ des.label }}：</div>
                        <div class="value">
                          <el-link v-if="des.isFile" type="primary" @click="openAttachPopUp(item[des.value])">查看</el-link>
                          <span v-else>{{ item[des.value] }}</span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </template>
            <el-empty v-else class="baseLoad2" />
          </div>
        </div>
      </div>
    </div>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>

<script>
import { importDeviceDetail } from '@/api/energySources'
import commonList from '@/assets/mixin/commonList'
export default {
  mixins: [commonList],
  data() {
    return {
      allData: {},
      descList1: [
        { field: 'deviceName', label: '设备名称', value: '', icon: '&#xe62c;' },
        { field: 'active', label: '使用状态', value: '', icon: '&#xe6a2;' },
        { field: 'companyName', label: '企业名称', value: '', icon: '&#xe790;' },
        { field: 'modelNum', label: '设备型号', value: '', icon: '&#xe64e;' },
        { field: 'deviceNum', label: '设备数量', value: '', icon: '&#xe633;' },
        { field: 'planUseYear', label: '设计使用年限', value: '', icon: '&#xe613;' },
        { field: 'deviceType', label: '设备类型', value: '', icon: '&#xe791;' },
        { field: 'putUseTime', label: '投运日期', value: '', icon: '&#xe685;' },
        { field: 'deviceAddr', label: '安装位置', value: '', icon: '&#xe87e;' },
        { field: 'stopTime', label: '计划淘汰时间', value: '', icon: '&#xe8d5;' }
      ],
      listMap: [
        {
          label: '紧急/重大设备维修记录',
          value: [
            { label: '巡检日期', value: 'examineTime', icon: '&#xe685;' },
            { label: '检验类别', value: 'examineType', icon: '&#xe6a4;' },
            { label: '检验频率', value: 'examineFrequency', icon: '&#xe6a4;' },
            { label: '检验结论', value: 'conclusion', icon: '&#xe668;' },
            { label: '巡检人员', value: 'examinePeople', icon: '&#xe700;' },
            { label: '下次检验日期', value: 'nextTime', icon: '&#xe685;' },
            { isFile: true, label: '附件', value: 'shareAttachVos', icon: '&#xe677;' }
          ],
          table: []
        }
      ],
      deviceType: '',
      examineId: ''
    }
  },
  async mounted() {
    const { deviceType, examineId } = this.$route.query
    this.examineId = examineId
    this.deviceType = deviceType
    this.$nextTick(() => {
      this.importDeviceDetail()
    })
  },
  methods: {
    back() {
      this.$router.back()
    },
    async importDeviceDetail() {
      this.layout.showAreaLoading(['.baseLoad'])
      this.layout.showAreaLoading(['.baseLoad1'])
      this.layout.showAreaLoading(['.baseLoad2'])
      const { data, status } = await importDeviceDetail({ examineId: this.examineId })
      if (status === 0 && data) {
        this.allData = data
        this.descList1.forEach((v) => {
          v.value = data[v.field] ?? ''
          if (v.isFile) {
            v.fileUuid = data[v.fieldUuidName] ?? ''
          }
        })
        this.listMap[0].table = data.nyExamineList
      }
      this.layout.hideAreaLoading(['.baseLoad'])
      this.layout.hideAreaLoading(['.baseLoad1'])
      this.layout.hideAreaLoading(['.baseLoad2'])
    }
  }
}
</script>
<style lang="scss" scoped>
.iconfont {
  display: none;
}
</style>
